<template>
	<view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th  align="center">部门</uni-th>
					<uni-th  align="center">负责人</uni-th>
					<uni-th align="center">项目名称</uni-th>
					<uni-th  align="center">内容</uni-th>
					<uni-th  align="center">进度</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td width="150" align="center">{{item.headers[0].department.name}}</uni-td>
										<uni-td width="150" align="center">{{item.headers[0].name}}</uni-td>
					<uni-td width="250" align="center">
						<view class="mycontent">
							{{item.projectPlan.name}}
						</view>
					</uni-td>
					<uni-td width="250" align="center">
						<view class="mycontent">
							{{item.projectPlan.content}}
						</view>
					</uni-td>
					<uni-td width="150" align="center">{{item.projectPlan.progress}}%</uni-td>
				</uni-tr>
			</uni-table>
			<uni-pagination :total="total" :pageSize="params.size" prev-text="前一页" next-text="后一页" @change="doChangePage"/>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import http from "@/utils/http";
	//onLoad方法
	onLoad(() => {
		loading.value=true;
		http.post("/projectPlan/getRecentCompletePlan", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.data;
				total.value=res.data.total;
			}
			loading.value=false;
		}).catch((re)=>{
			loading.value=false;
		});;
	});
	//变量
	const params =ref({
		page :1,
		size :7
	});
	const tableData = ref([]);
	const total = ref(0);
	const loading = ref(false);
	//翻页
	function doChangePage(e){
		params.value.page = e.current;
		loading.value=true;
		http.post("/projectPlan/getRecentCompletePlan", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.data;
				total.value= res.data.total;
				loading.value=false;
			}
		}).catch((re)=>{
			loading.value=false;
		});
	}
</script>
<style scope>
	.mycontent{
		width: 500rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>